<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Java应用监控系统</title>
<link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" />

</head>

<style>
.layui-layout-admin .layui-body {
	bottom: 0px;
}
</style>

<body>
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header" style="width: 200px">
			<div class="layui-logo">Java应用监控系统</div>
		</div>

		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul class="layui-nav layui-nav-tree" lay-filter="test">
					
					<!--首页-->
					<li class="layui-nav-item">
						<a onclick="index()" href="javascript:void(0)">
							<i class="layui-icon">&#xe68e;</i>&nbsp;首页
						</a>
					</li>
					
					<!--远程主机-->
					<li class="layui-nav-item layui-nav-itemed">
						<a class="" href="javascript:void(0)">
							<i class="layui-icon">&#xe7ae;</i>&nbsp;进程
						</a>
						<dl class="layui-nav-child" th:each="item:${jpsList}">
							<dd>
								<a th:onclick="'step('+${item.pid}+')'" href="javascript:void(0)" th:text="${item.smallName}"/>
							</dd>
						</dl>
					</li>

					<!--关于-->
					<li class="layui-nav-item">
						<a class="" href="javascript:void(0)">
							<i class="layui-icon">&#xe60b;</i>&nbsp;关于
						</a>
						<dl class="layui-nav-child">
							<dd>
								<a onclick="github()" href="javascript:void(0)">Github</a>
							</dd>
							<dd>
								<a onclick="gitee()" href="javascript:void(0)">Gitee</a>
							</dd>
						</dl>
					</li>
				</ul>
			</div>
		</div>

		<div class="layui-body" style="top: 0px; overflow-y: hidden">
			<!-- 内容主体区域 -->
			<iframe id="iframe" height="100%" width="100%" src="/main" frameborder="no" allowtransparency="yes"></iframe>
		</div>

	</div>
	<script th:src="@{/lib/layui/layui.all.js}"></script>
	<script type="text/javascript" th:src="@{/lib/jquery.min.js}"></script>
	<script type="text/javascript">

		function step(id) {
			$("#iframe").attr("src", "/monitor?pid=" + id);
			//加载动画
			layer.load();
			setTimeout(function() {
				layer.closeAll('loading');
			}, 2000);

		}

		function index() {
			$("#iframe").attr("src", "/main");
		}
		
		var github = function () {
			layer.alert('任性，加了个图标', {icon: 1});
		}
		
		var gitee = function () {
			layer.alert('任性，加了个图标', {icon: 1});
		}
	</script>
</body>
</html>